{"id":1343,"date":"2018-02-28T22:21:36","date_gmt":"2018-02-28T21:21:36","guid":{"rendered":"http:\/\/yarogniew.net\/arduino\/?page_id=1343"},"modified":"2018-05-11T19:20:37","modified_gmt":"2018-05-11T17:20:37","slug":"instalacja-p5-js","status":"publish","type":"page","link":"http:\/\/adsl_zapas.dkonto.pl\/index.php\/javascript\/instalacja-p5-js\/","title":{"rendered":"Instalacja P5.js"},"content":{"rendered":"

\u22a5\u0179r\u00f3d\u0142o:\u00a01.2: p5.js Workflow – p5.js Tutorial<\/a><\/p>\n

Krok pierwszy: instalowanie p5-manager<\/h4>\n
    \n
  1. Instalujemy Node.js ze strony<\/em>\u00a0https:\/\/nodejs.org\/en\/<\/a><\/li>\n
  2. $ sudo npm install p5-manager -g<\/strong>\u00a0<\/span>Password:
    \nnpm WARN deprecated babel-preset-es2015@6.24.1: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io\/env to update!
    \n\/usr\/local\/bin\/p5 -> \/usr\/local\/lib\/node_modules\/p5-manager\/bin\/p5-manager.js<\/span><\/span>> fsevents@1.1.3 install \/usr\/local\/lib\/node_modules\/p5-manager\/node_modules\/fsevents
    \n> node install[fsevents] Success: “\/usr\/local\/lib\/node_modules\/p5-manager\/node_modules\/fsevents\/lib\/binding\/Release\/node-v57-darwin-x64\/fse.node” already installed
    \nPass –update-binary to reinstall or –build-from-source to recompile
    \n+ p5-manager@0.4.2
    \nadded 440 packages in 13.828s
    \nMac-mini-Jarogniew:~ yarogni7ew$<\/li>\n
  3. $ p5<\/strong>
    \np5-manager version 0.4.2
    \nMac-mini-Jarogniew:~ yarogni7ew$<\/li>\n
  4. $ pwd<\/strong> \u00a0[print working directory,\u00a0informacja gdzie na komputerze znajduje si\u0119 folder roboczy]<\/em>
    \n\/Users\/yarogni7ew
    \nMac-mini-Jarogniew:~ yarogni7ew$<\/li>\n
  5. $ cd Desktop\/\u00a0<\/strong>
    \nMac-mini-Jarogniew:Desktop yarogni7ew$\u00a0pwd
    \n\/Users\/yarogni7ew\/Desktop
    \nMac-mini-Jarogniew:Desktop yarogni7ew$<\/li>\n
  6. $ p5 generate -b p5js_testowy<\/strong>
    \np5-manager version 0.4.2
    \ncreate : p5js_testowy
    \ncreate : p5js_testowy\/sketch.js
    \ncreate : p5js_testowy\/index.html
    \ncreate : p5js_testowy\/libraries
    \ncreate : p5js_testowy\/libraries\/p5.js
    \ncreate : p5js_testowy\/libraries\/p5.sound.js
    \ncreate : p5js_testowy\/libraries\/p5.dom.js
    \nMac-mini-Jarogniew:Desktop yarogni7ew$<\/li>\n<\/ol>\n

    Krok drugi: instalowanie edytora<\/h4>\n
      \n
    1. \u015aci\u0105gamy ze strony\u00a0https:\/\/atom.io<\/a>\u00a0edytor i instalujemy go<\/li>\n
    2. Otwieramy nasz folder:\u00a0p5js_testowy<\/strong><\/li>\n
    3. Dokonujemy ma\u0142ej zmiany, ja doda\u0142em \u0142adniejsz\u0105 ziele\u0144\u00a0\u2192 background(120, 255, 120);\n
      function setup() {\r\n\tcreateCanvas(windowWidth, windowHeight);\r\n}\r\n\r\nfunction draw() {\r\n\r\n\tbackground(120, 255, 120);\r\n\r\n}<\/pre>\n<\/li>\n
    4. Zapisujemy! cmd-S
      \n<\/strong><\/li>\n
    5. Klikamy w index.html i w przegl\u0105darce otwiera si\u0119 zielone okno z adresem:\u00a0file:\/\/\/Users\/yarogni7ew\/Desktop\/p5js_testowy\/index.html<\/li>\n<\/ol>\n
      Krok trzeci: instalowanie edytora<\/h4>\n
      W edytorze ATOM<\/strong> wchodzimy w Preferences…\u00a0\u21d2 +Install\u00a0\u21d2 atom-live-server<\/em>
      \nPo instalacji wchodzimy w zak\u0142adk\u0119 Packages\u00a0\u21d2\u00a0atom-live-server\u00a0\u21d2 Start server (ctrl-alt-L)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
      \u22a5\u0179r\u00f3d\u0142o:\u00a01.2: p5.js Workflow – p5.js Tutorial Krok pierwszy: instalowanie p5-manager Instalujemy Node.js ze strony\u00a0https:\/\/nodejs.org\/en\/ $ sudo npm install p5-manager -g\u00a0Password: npm WARN deprecated babel-preset-es2015@6.24.1: 🙌 Thanks for using Babel: we…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1327,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1343","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t